<template>
  <div ref="chart" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const chart = ref(null);

// 模拟的数据，可以根据实际需求替换为真实数据
const data = [
  { value: 335, name: "制造业" },
  { value: 310, name: "建筑业" },
  { value: 234, name: "信息技术" },
  { value: 135, name: "金融" },
  { value: 1548, name: "其他" },
];

onMounted(() => {
  const myChart = echarts.init(chart.value);

  const option = {
    tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "行业分布",
        type: "pie",
        radius: ["40%", "90%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        // label: {
        //       show: true,
        //       position: 'outside',
        //       formatter: '{b}: {d}%' // 显示标签和百分比
        //     },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },

        data: data,
        // emphasis: {
        //   itemStyle: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowColor: 'rgba(0, 0, 0, 0.5)'
        //   }
        // }
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style scoped>
/* 添加一些样式以适应图表 */
</style>
